<template>
  <div
      ref="colorBarRef"
      :style="{
      width: isHorizontal ? width : '30px',
      height: isHorizontal ? '30px' : height,
      background: gradient,
      position: 'relative',
      cursor: 'pointer'
    }"
      @mousemove="handleMouseMove"
      @mouseout="handleMouseOut"
  ></div>
  <div
      ref="tooltipRef"
      :style="{
      position: 'absolute',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      color: 'white',
      padding: '5px',
      borderRadius: '5px',
      display: tooltipVisible ? 'block' : 'none',
      zIndex: 1
    }"
  ></div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';

const props = defineProps({
  colorStops: {
    type: Array,
    default: () => [
      { percentage: 0, color: 'blue' },
      { percentage: 0.5, color: 'yellow' },
      { percentage: 1, color: 'red' },

    ]
  },
  isHorizontal: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  isReverse: {
    type: Boolean,
    default: false
  }
});

const colorBarRef = ref(null);
const tooltipRef = ref(null);
const tooltipVisible = ref(false);
const gradient = ref(null);

// 对 colorStops 按 percentage 排序
const sortedColorStops = computed(() => {
  return [...props.colorStops].sort((a, b) => a.percentage - b.percentage);
});

const createGradientString = () => {
  let direction;
  if (props.isHorizontal) {
    direction = props.isReverse ? 'to left' : 'to right';
  } else {
    direction = props.isReverse ? 'to top' : 'to bottom';
  }
  const stops = sortedColorStops.value.map(stop => `${stop.color} ${stop.percentage * 100}%`).join(', ');
  return `linear-gradient(${direction}, ${stops})`;
};

const handleMouseMove = (e) => {
  const rect = colorBarRef.value.getBoundingClientRect();
  let offset;
  let max;
  if (props.isHorizontal) {
    offset = e.clientX - rect.left;
    max = rect.width;
  } else {
    offset = e.clientY - rect.top;
    max = rect.height;
  }
  const percentage = offset / max;

  const canvas = document.createElement('canvas');
  canvas.width = props.isHorizontal ? rect.width : 30;
  canvas.height = props.isHorizontal ? 30 : rect.height;
  const ctx = canvas.getContext('2d');
  const grad = ctx.createLinearGradient(
      0,
      0,
      props.isHorizontal ? rect.width : 0,
      props.isHorizontal ? 0 : rect.height
  );
  sortedColorStops.value.forEach(stop => {
    grad.addColorStop(stop.percentage, stop.color);
  });
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  let imageData;
  if (props.isHorizontal) {
    imageData = ctx.getImageData(offset, 0, 1, 1).data;
  } else {
    imageData = ctx.getImageData(0, offset, 1, 1).data;
  }
  const color = `rgb(${imageData[0]}, ${imageData[1]}, ${imageData[2]})`;

  tooltipVisible.value = true;
  tooltipRef.value.style.left = e.clientX + 'px';
  tooltipRef.value.style.top = e.clientY + 'px';
  tooltipRef.value.textContent = `Color: ${color}, Percentage: ${(percentage * 100).toFixed(2)}%`;
};

const handleMouseOut = () => {
  tooltipVisible.value = false;
};

onMounted(() => {
  gradient.value = createGradientString();
  colorBarRef.value.style.background = gradient.value;
});
</script>